<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2024/6/17
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        input,button{
            height: 50px;
            width: 260px;
            border-radius: 6px;
        }
        input{
            border: 1px solid grey;
            color: dimgrey;
            padding-left: 8px;
        }
        button{
            width: 80px;
            color: #FFFFFF;
            border: none;

        }
        #find{
            background-color: darkorange;
        }
        #add{
            background-color: lightgreen;
        }
        table{
            width: 90%;
            text-align: center;
        }
        table tbody tr:hover{
            background-color: blanchedalmond;
        }
        #addUserInfoDialog{
            width: 600px;
            height: 380px;
            background-color: #FFFFFF;
            box-shadow: 6px 6px 12px darkgrey;
            border-radius: 6px;
            text-align: center;
            position: absolute;
            top: 120px;
            left: 200px;
            display: none;
        }
        #addUserInfoDialog div{
            line-height: 60px;
        }
        #insert{
            background-color: cadetblue;
        }
        #close{
            background-color: darkgray;
        }
        #addUserInfoDialog input{
            width: 300px;
        }

        a{
            display: inline-block;
            height: 40px;
            width: 60px;
            border-radius: 6px;
            color: #FFFFFF;
            border: 0PX;
            text-align: center;
            font-size: 13px;
            text-decoration: none;
            background-color: #5F9EA0;
            line-height: 40px;


        }
    </style>
</head>
<body>
<div>
<%--    顶部搜索--%>
    <div id="search">
        <form action="getUserifoes" method="get">
            <input placeholder="请输入..." name="username"/>
            <button id="find">查询</button>
            <button id="add" type="button" onclick="openInserDialog()">新增</button>
        </form>
    </div>
<%--    表格展示数据--%>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>家庭住址</th>
                    <th>联系方式</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${userinfoes}" var="userinfo" varStatus="status">
                    <tr>
                        <td>${status.index+1}</td>
                        <td>${userinfo.username}</td>
                        <td>${userinfo.userpwd}</td>
                        <td>${userinfo.useraddress}</td>
                        <td>${userinfo.usertel}</td>
                        <td>
                            <a style="background-color: darkseagreen;" href="http://localhost:8086/getUserInfoById?id=${userinfo.id}">编辑</a>
                            <a style="background-color: orangered;" href="http://localhost:8086/deleteUserinfo?id=${userinfo.id}">删除</a>
                            <button onclick="deleteUserInfoMethod(${userinfo.id})" id="deleteBt" style=" height: 40px;width: 85px;line-height:40px;background-color: orange">ajax删除</button>
                        </td>
                    </tr>
                </c:forEach>

            </tbody>
        </table>
    </div>
<%--新增的弹框--%>

    <div id="addUserInfoDialog">
        <form action="inserUserinfo" method="post">
            <div style="margin-top:50px">
                用&nbsp; 户&nbsp; 名<input type="text" name="username" placeholder="请输入用户名" />
            </div>
            <div>
                密&nbsp; &nbsp; &nbsp; 码<input type="text" name="userpwd" placeholder="请输入密码" />
            </div>
            <div>
                家庭住址<input type="text" name="useraddress" placeholder="请输入家庭住址" />
            </div>
            <div>
                联系方式<input type="text" name="usertel" placeholder="请输入联系方式" />
            </div>
            <div>
                <button id="insert">新增</button>
                <button style="margin-left: 15px;"  id="close" type="button" onclick="closeInserDialog()">关闭</button>
            </div>
        </form>
    </div>

</div>
</body>
<script>
    function openInserDialog(){
        var inserDialog=document.getElementById("addUserInfoDialog")
        inserDialog.style.display="block"
    }
    function closeInserDialog(){
        var inserDialog=document.getElementById("addUserInfoDialog")
        inserDialog.style.display="none"
    }
    function deleteUserInfoMethod(userId){
        var ajaxRequest=new XMLHttpRequest();
        ajaxRequest.open("get","http://localhost:8086/deleteUserinfoByAjax?id="+userId,"true")
        ajaxRequest.send()
        ajaxRequest.onreadystatechange=function(response){
            if(ajaxRequest.readyState==4){
                alert("删除成功")
            //     刷新页面
                location.reload()

            }
        }

    }

</script>
</html>
